<template>
    <div class='app df fd-c jc-sb'>
        <!-- <dv-border-box-8 :reverse="true" class="df fd-c jc-sb a"> -->
        <div class="a1 df">
            <dv-border-box-8>
                <div class="num">8029</div>
                <div class="text">出还排查数</div>
                <div class="bottom df">
                    <span></span>
                    <span>62%</span>
                </div>

            </dv-border-box-8>
            <dv-border-box-8>

                <div class="num">6288</div>
                <div class="text">出换修复数</div>
                <div class="bottom df" style="margin-bottom: 20px;">
                    <span></span>
                    <span>89%</span>
                </div>

            </dv-border-box-8>
        </div>
        <div class="a2">
            <dv-border-box-8>
                <div id="main" class="bingtu"></div>
            </dv-border-box-8>
        </div>

        <!-- </dv-border-box-8> -->
    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            option: {}
        }
    },
    created() { },
    mounted() {
        var chartDom = document.getElementById('main');
        var myChart = this.$echarts.init(chartDom);

        this.option = {
            tooltip: {
                trigger: 'item'
            },
            // legend: {  //显示按钮
            //     top: '5%',
            //     left: 'center'
            // },

            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    // // avoidLabelOverlap: false,
                    label: {
                        show: true,  //中间文字的显示
                        // position: 'center',
                        // formatter: 格式化文字
                        formatter: function (arg) {
                            return arg.name
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '24',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                }
            ]


        }

        myChart.setOption(this.option);

    },
    methods: {}
}
</script>
<style scoped lang='scss'>
.bingtu {
    width: 100%;
    height: 100%;
    margin: auto;
    transform: scale(0.8);
}

.app {
    // height: 569px;
    width: 519px;

    // background-color: #fff;
    .num {
        margin-top: 20px;
        font-size: 34px;
        color: #58DBFF;
        text-align: center;
        font-weight: 700;
    }

    .text {
        color: #fff;
        text-align: center;
        font-size: 16px;
    }

    .bottom {
        width: 90%;
        margin: auto;
        border: 1px solid #fff;
        margin-top: 10px;

        span:nth-child(1) {
            width: 60%;
            height: 32px;
            background-image: linear-gradient(to right, #016adf, #16b6ff);
        }

        span:nth-child(2) {
            width: 40%;
            height: 32px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            font-size: 19px;
        }
    }

    .a1 {
        height: 170px;
    }

    .a2 {
        height: 380px;
    }
}

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
</style>
